<!--  -->
<template>
  <div class="design-menu dfac">
    <ul class="menu-ul">
      <li>
        <div class="title" v-show="show"><a class="nohover">页面</a></div>
        <div class="li-child white">
          <ul class="child-ul">
            <li @click.stop="editorLogo">
              <div class="title"><a>编辑Logo</a></div>
            </li>
            <li @click.stop="editorBanner">
              <div class="title"><a> Banner </a></div>
            </li>
            <li @click.stop="editorNavigation">
              <div class="title"><a> 导航菜单 </a></div>
            </li>
          </ul>
        </div>
      </li>
      <li @click.stop="resetCurrentPage">
        <div class="title"><a>刷新</a></div>
      </li>
      <li @click.stop="backContentUser">
        <div class="title"><a>后台</a></div>
      </li>
      <li @click.stop="logout">
        <div class="title"><a>退出</a></div>
      </li>
    </ul>
    <DialogEditorLogo ref="dialogEditorLogo" />
    <DialogEditorBanner ref="dialogEditorBanner" />
    <DialogEditorNavigation ref="dialogEditorNavigation" />
  </div>
</template>

<script>
import ContainerSet from '@/components/header/backendHeader/backenddesignheader/menu/ContainerSet.vue'
import ContainerOpt from '@/components/header/backendHeader/backenddesignheader/menu/ContainerOpt.vue'
import ComponentOpt from '@/components/header/backendHeader/backenddesignheader/menu/ComponentOpt.vue'
import DialogEditorLogo from '@/components/common/design/dialog/DialogEditorLogo.vue'
import DialogEditorBanner from '@/components/common/design/dialog/DialogEditorBanner.vue'
import DialogEditorNavigation from '@/components/common/design/dialog/DialogEditorNavigation.vue'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import PubSub from 'pubsub-js'
import { mapState, mapGetters } from 'vuex'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { publishdata, routerPush } from '@/core/functions.js'

export default {
  created () {
    // 添加重新刷新页面调用方法
    // 调用：PubSub.publish('designRefreshPage')
    PubSub.subscribe(PubsubType.PUBSUB_DESIGN_REFRESH_PAGE, (event, data) => {
      this.resetCurrentPage()
    })
    PubSub.subscribe(PubsubType.PUBSUB_RERENDER_NAVIGATION, (event, data) => {
      this.rerenderNavigation()
    })
    PubSub.subscribe(PubsubType.PUBSUB_DESIGN_EDITOR_PAGE, (event, bool) => {
      this.show = bool
    })

    VueFunctions.method(WindowType.COMBINATION_KEYS_ALT_AND_B, () => {
      if (this.$refs['dialogEditorBanner'].getDialogShow()) {
        this.$refs['dialogEditorBanner'].close()
      } else {
        this.$refs['dialogEditorBanner'].show()
      }
    })
  },
  computed: {
    ...mapState([
      'design',
      'loginUrl'
    ]),
    ...mapGetters(['currentMenu'])
  },
  data () {
    return {
      // 是否可以操作固定
      isOptFixed: true,
      show: false
    }
  },
  watch: {
    // design: {
    //   handler () {
    //     if (this.design && parseInt(this.design.refresh) === 1) {
    //       this.resetCurrentPage()
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    editorLogo () {
      this.$refs['dialogEditorLogo'].show()
    },
    editorBanner () {
      this.$refs['dialogEditorBanner'].show()
    },
    editorNavigation () {
      // this.$message.error('未开发！')
      this.$refs['dialogEditorNavigation'].show()
    },
    // 刷新当前页面
    resetCurrentPage () {
      if (this.$store.state.design && this.$store.state.design.iframeSrc && this.$store.state.design.iframeSrc.length > 0 && this.$store.state.design.pageId > 0) {
        let src = this.$store.state.design.iframeSrc
        if (src.indexOf('?') < 0) {
          this.$store.dispatch('designSetIframePageId', -1)
          this.$store.dispatch('designSetIframeSrc', src + '?timenow=' + new Date().getTime())
        } else {
          let matchResult = src.match(/.*?timenow=(\d+).*?/)
          if (matchResult && matchResult[1]) {
            let time = matchResult[1] + ''
            let newTime = '' + new Date().getTime()
            src = src.replace(time, newTime)
          } else {
            src += 'timenow=' + new Date().getTime()
          }
          this.$store.dispatch('designSetIframePageId', -1)
          this.$store.dispatch('designSetIframeSrc', src)
        }
      }
    },
    // 重新获取到设计区域所需要的导航数据，然后重新渲染设计区域的页面导航
    rerenderNavigation () {
      if (this.$store.state.design && this.$store.state.design.iframeSrc && this.$store.state.design.iframeSrc.length > 0 && this.$store.state.design.pageId > 0) {
        // 获取数据
        this.$post('/navigation/infos', { index: '2' }).then(rps => {
          if (rps && rps.length > 0) {
            BackendjsFunctions.rerenderNavigation(rps)
          } else {
            // 删除到没有导航数据的时候，刷新页面
            PubSub.publish(PubsubType.PUBSUB_DESIGN_REFRESH_PAGE)
          }
        })
      }
    },
    backContentUser () {
      const push = () => {
        if (parseInt(this.currentMenu.index) === 1) {
          let result = routerPush('/backend/user')
          this.$router.push(result)
        } else {
          let params = {
            index: '1'
          }
          this.$store.dispatch('menuChange', params)
        }
      }
      let dataBody = false
      try {
        dataBody = BackendjsFunctions.publish()
      } catch (error) {
        console.error(error)
      }
      if (!publishdata(dataBody)) {
        push()
      } else {
        this.$confirm('确定不发布已编辑的内容直接进入后台么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          push()
        }).catch(() => {
        })
      }
    },
    logout () {
      this.$post('/user/logout', null).then(response => {
        if (parseInt(response) === 1) {
          window.location.href = this.loginUrl
        }
      })
    }
  },
  components: {
    ContainerSet,
    ContainerOpt,
    ComponentOpt,
    DialogEditorLogo,
    DialogEditorBanner,
    DialogEditorNavigation
  }
}

</script>

<style>
.design-menu {
  margin-left: 18px;
  position: relative;
}
.design-menu a {
  color: #333;
}
.design-menu a:hover,
.design-menu li:hover > .title > a {
  color: #258ffb;
}
.design-menu .menu-ul {
  display: flex;
  flex-flow: row;
  top: 0;
}
.design-menu .menu-ul li {
  line-height: 48px;
  font-size: 14px;
  list-style-type: none;
  padding: 0 12px;
  display: flex;
  flex-flow: column;
  cursor: pointer;
}
.design-menu .menu-ul li .title {
  display: block;
  white-space: nowrap;
}
.design-menu .menu-ul .li-child {
  position: absolute;
  top: 48px;
  display: none;
}
.design-menu .menu-ul .li-child .child-ul {
  position: relative;
  left: -12px;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.design-menu .menu-ul .li-child .child-ul li {
  line-height: 3;
}
.design-menu .menu-ul .li-child .last-child {
  position: absolute;
  left: calc(100% + 12px);
  display: none;
}
.design-menu .menu-ul > li:hover .li-child {
  display: block;
}
.design-menu .menu-ul .child-ul > li:hover {
  background-color: #f6f6f6;
}
.design-menu .menu-ul .child-ul > li:hover .last-child {
  display: block;
}
.design-menu .nbsp4 {
  display: inline-block;
  width: 16px;
}
.design-menu .disable {
  color: #409eff;
  cursor: not-allowed;
}
.design-menu .disable-no {
  color: #656565;
  cursor: not-allowed;
}
.design-menu .disable-no:hover {
  color: #656565;
}
.design-menu .fixed-wd2 {
  width: 160px;
  display: flex;
  justify-content: space-between;
}
</style>
